<template>
	<div>
		<el-button type="primary" @click="handleAdd">
			添加/修改成员
		</el-button>
		<div>
			<el-tag
				v-for="(item, index) in list"
				:key="item.user_id"
				closable
				class="mr-1 mt-1"
				@close="handleRemove(index)"
				size="small"
			>
				{{ item.user_name }} ({{ item.biz_name }})
			</el-tag>
		</div>
		<employees-dialog ref="employeesDialog" :checkedList.sync="list" @save="handleSave" />
	</div>
</template>
<script>
import EmployeesDialog from "./employees-dialog";
export default {
	components: {
		EmployeesDialog
	},
	props: {
		value: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			list: this.value
		};
	},
	// watch: {
	// 	value(){

	// 	}
	// },
	methods: {
		handleAdd() {
			this.$refs.employeesDialog.open();
		},
		handleRemove(index) {
			this.list.splice(index, 1);
			this.handleChange();
		},
		handleSave() {
			this.handleChange();
		},
		handleChange() {
			this.$emit("input", this.list);
		}
	}
};
</script>
